<template>
  <div>
    <div class="song-list-container">
      <div class="song-list">
        <div class="song-list-header">
          <div class="total">
            <span>全部</span>
            <a href="javascript:;" class="select-category">
              <span>选择分类</span>
              <span class="iconfont icon-linecar105"></span>
              <div class="select-category-page">
                <div>
                  <a href="" class="total-style">全部风格</a>
                </div>
                <div class="up-arrow"></div>
                <dl>
                  <dt>
                    <span class="iconfont icon-qiu"></span>
                    语种
                  </dt>
                  <dd>
                    <a href="">华语</a>
                    <span>|</span>
                    <a href="">欧美</a>
                    <span>|</span>
                    <a href="">日语</a>
                    <span>|</span>
                    <a href="">韩语</a>
                    <span>|</span>
                    <a href="">粤语</a>
                    <span>|</span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="iconfont icon-gangqin"></span>
                    风格
                  </dt>
                  <dd>
                    <a href="">流行</a>
                    <span>|</span>
                    <a href="">摇滚</a>
                    <span>|</span>
                    <a href="">民谣</a>
                    <span>|</span>
                    <a href="">电子</a>
                    <span>|</span>
                    <a href="">舞曲</a>
                    <span>|</span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="iconfont icon-kafei"></span>
                    场景
                  </dt>
                  <dd>
                    <a href="">清晨</a>
                    <span>|</span>
                    <a href="">夜晚</a>
                    <span>|</span>
                    <a href="">学习</a>
                    <span>|</span>
                    <a href="">工作</a>
                    <span>|</span>
                    <a href="">午休</a>
                    <span>|</span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="iconfont icon-xiaolian"></span>
                    情感
                  </dt>
                  <dd>
                    <a href="">怀旧</a>
                    <span>|</span>
                    <a href="">清新</a>
                    <span>|</span>
                    <a href="">浪漫</a>
                    <span>|</span>
                    <a href="">伤感</a>
                    <span>|</span>
                    <a href="">治愈</a>
                    <span>|</span>
                  </dd>
                </dl>
                <dl>
                  <dt>
                    <span class="iconfont icon-yinle"></span>
                    主题
                  </dt>
                  <dd>
                    <a href="">综艺</a>
                    <span>|</span>
                    <a href="">影视原声</a>
                    <span>|</span>
                    <a href="">ACG</a>
                    <span>|</span>
                    <a href="">儿童</a>
                    <span>|</span>
                    <a href="">校园</a>
                    <span>|</span>
                  </dd>
                </dl>
              </div>
            </a>
            <div class="hot-door">
              <a href="">热门</a>
            </div>
          </div>
          <!-- 歌单清单 -->
          <ul class="song-list-detail">
            <li class="song-list-nav" v-for="(item, index) in 8" :key="index">
              <a href="" class="song-img-nav">
                <img
                  src="https://p2.music.126.net/_bI2Ju0zDzdDkWgOiC4fmQ==/109951167672668260.jpg?param=140y140"
                  alt=""
                />
                <div class="song-img-bottom">
                  <span class="iconfont icon-erji"></span>
                  <span>12707</span>
                  <a href="" class="iconfont icon-bofangqi-bofangshu"> </a>
                </div>
              </a>
              <a class="song-list-instruction">Chill Time</a>
              <p class="sang-by-who">
                <span>by</span><a href="" class="sang-by">野原夏至</a
                ><img src="" alt="图标" />
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SongList",
  data() {
    return {
      palylist: [],
    };
  },
};
</script>

<style lang="less">
//歌单
.song-list-container {
  background-color: #f5f5f5;
  .song-list {
    width: 980px;
    margin: 0 auto;
    padding: 40px;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    background-color: #fff;
    .song-list-header {
      width: 900px;
      margin: 0 auto;
      .total {
        position: relative;
        display: flex;
        align-items: center;
        height: 40px;
        border-bottom: 2px solid #c20c0c;
        & > span {
          font-size: 30px;
        }
        .select-category {
          position: relative;
          text-align: center;
          height: 31px;
          line-height: 31px;
          font-size: 12px;
          border: 1px solid #cdcdcd;
          border-radius: 5px;
          margin: 2px 0px 0px 12px;
          padding: 0px 5px 0px 0px;
          span {
            color: #0c73c2;
            padding-left: 10px;
          }
          .icon-linecar105 {
            margin-left: -2px;
            padding-right: 15px;
          }
          //点击歌单选择分类，显示分类列表
          .select-category-page {
            display: none;
            position: absolute;
            top: 42px;
            left: -130px;
            width: 700px;
            height: 500px;
            background-color: #fff;
            z-index: 555;
            border: 1px solid #bebebe;
            .up-arrow {
              position: absolute;
              left: 165px;
              top: -11px;
              padding: 0 0 4px 27px;
              height: 12px;
              border: none;
              background-image: url(./images/iconall.png);
              background-position: -47px 0;
              z-index: 100;
            }
            dl > dt,
            dl > dd {
              float: left;
            }
            dl > dt > span {
              font-size: 23px;
              margin: 2px 8px 4px 0;
              color: #999;
            }
            dl > dt {
              padding: 12px 12px 0 26px;
              color: #333;
              font-weight: bold;
            }
            dl > dd {
              text-align: left;
              padding: 16px 15px 0 15px;
              width: 460px;
              border-left: 1px solid #e6e6e6;
            }
            dl > dd > span {
              margin-right: 7px;
              color: #e4e4e4;
            }
            & > div {
              overflow: hidden;
              padding: 18px 0 8px 26px;
              border: 1px solid #e6e6e6;
              .total-style {
                float: left;
                top: 18px;
                left: 26px;
                display: inline-block;
                width: 75px;
                height: 26px;
                line-height: 26px;
                border-radius: 3px;
                border: 1px solid #e6e6e6;
                text-align: center;
                background-color: #f4f4f4;
                color: #333;
              }
            }
          }
        }
        .select-category:hover {
          text-decoration: none;
        }
        .hot-door {
          position: absolute;
          top: 0;
          right: 0;
          width: 46px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          border-radius: 6px;
          font-size: 14px;
          background-color: #c20c0c;
          & > a {
            color: #fff;
          }
        }
      }
      //歌单清单
      .song-list-detail {
        margin: 30px 0 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .song-list-nav {
          width: 140px;
          padding-right: 25px;
          .song-img-nav {
            position: relative;
            display: block;
            width: 100%;
            height: 140px;
            .song-img-bottom {
              display: flex;
              position: absolute;
              align-items: center;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 27px;
              background-color: #604e38;
              opacity: 0.5;
              .icon-erji {
                position: absolute;
                margin-left: 10px;
                z-index: 2;
                color: #cacaca;
              }
              .icon-bofangqi-bofangshu {
                position: absolute;
                color: #cbcbcb;
                font-weight: bold;
                font-size: 22px;
                right: 8px;
              }
              .icon-bofangqi-bofangshu:hover {
                color: #fff;
                text-decoration: none;
              }

              & span:nth-child(2) {
                color: #ccc;
                z-index: 3;
                margin-left: 32px;
              }
            }
          }
          .song-list-instruction {
            display: inline-block;
            cursor: pointer;
            margin: 8px 0 3px;
            font-size: 14px;
            width: 100%;
            color: #000;
          }
          .sang-by-who {
            & > span {
              margin-right: 4px;
            }
            .sang-by {
              cursor: pointer;
              color: #666;
            }
            & > img {
              width: 13px;
              height: 13px;
            }
          }
        }
      }
    }
  }
}
</style>
